<template>
  <div>
    <h2>Chart.js 折线图</h2>
    <canvas ref="lineChart" width="600" height="260"></canvas>
    <h2 style="margin-top: 32px;">Chart.js 柱状图</h2>
    <canvas ref="barChart" width="600" height="260"></canvas>
    <h2 style="margin-top: 32px;">Chart.js 饼图</h2>
    <canvas ref="pieChart" width="600" height="260"></canvas>
    <h2 style="margin-top: 32px;">Chart.js 雷达图</h2>
    <canvas ref="radarChart" width="600" height="260"></canvas>
    <h2 style="margin-top: 32px;">Chart.js 散点图</h2>
    <canvas ref="scatterChart" width="600" height="260"></canvas>
    <h2 style="margin-top: 32px;">Chart.js 仪表盘（Doughnut 近似）</h2>
    <canvas ref="gaugeChart" width="600" height="260"></canvas>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { Chart, LineController, LineElement, PointElement, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend, PieController, ArcElement, RadarController, RadialLinearScale, ScatterController, DoughnutController } from 'chart.js'

Chart.register(LineController, LineElement, PointElement, BarController, BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend, PieController, ArcElement, RadarController, RadialLinearScale, ScatterController, DoughnutController)

const lineChart = ref(null)
const barChart = ref(null)
const pieChart = ref(null)
const radarChart = ref(null)
const scatterChart = ref(null)
const gaugeChart = ref(null)

onMounted(() => {
  // 折线图
  new Chart(lineChart.value, {
    type: 'line',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: '访问量',
        data: [150, 230, 224, 218, 135, 147, 260],
        borderColor: 'rgba(54, 162, 235, 1)',
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        fill: true
      }]
    },
    options: {
      plugins: { title: { display: true, text: '一周访问量' } },
      responsive: false
    }
  })

  // 柱状图
  new Chart(barChart.value, {
    type: 'bar',
    data: {
      labels: ['北京', '上海', '广州', '深圳', '杭州'],
      datasets: [{
        label: '销量',
        data: [320, 452, 301, 334, 390],
        backgroundColor: 'rgba(75, 192, 192, 0.5)'
      }]
    },
    options: {
      plugins: { title: { display: true, text: '各城市销量' } },
      responsive: false
    }
  })

  // 饼图
  new Chart(pieChart.value, {
    type: 'pie',
    data: {
      labels: ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告'],
      datasets: [{
        label: '来源',
        data: [1048, 735, 580, 484, 300],
        backgroundColor: [
          'rgba(255, 99, 132, 0.5)',
          'rgba(54, 162, 235, 0.5)',
          'rgba(255, 206, 86, 0.5)',
          'rgba(75, 192, 192, 0.5)',
          'rgba(153, 102, 255, 0.5)'
        ]
      }]
    },
    options: {
      plugins: { title: { display: true, text: '访问来源' } },
      responsive: false
    }
  })

  // 雷达图
  new Chart(radarChart.value, {
    type: 'radar',
    data: {
      labels: ['前端', '后端', '算法', '运维', '产品'],
      datasets: [
        {
          label: '张三',
          data: [90, 80, 70, 60, 85],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          pointBackgroundColor: 'rgba(255, 99, 132, 1)'
        },
        {
          label: '李四',
          data: [60, 85, 90, 70, 60],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          pointBackgroundColor: 'rgba(54, 162, 235, 1)'
        }
      ]
    },
    options: {
      plugins: { title: { display: true, text: '个人技能雷达' } },
      responsive: false
    }
  })

  // 散点图
  new Chart(scatterChart.value, {
    type: 'scatter',
    data: {
      datasets: [{
        label: '身高体重分布',
        data: [
          { x: 170, y: 65 }, { x: 168, y: 60 }, { x: 175, y: 75 }, { x: 180, y: 80 }, { x: 160, y: 50 }, { x: 172, y: 68 }, { x: 178, y: 72 }
        ],
        backgroundColor: 'rgba(255, 206, 86, 0.7)'
      }]
    },
    options: {
      plugins: { title: { display: true, text: '身高体重分布' } },
      responsive: false,
      scales: {
        x: { title: { display: true, text: '身高(cm)' } },
        y: { title: { display: true, text: '体重(kg)' } }
      }
    }
  })

  // 仪表盘（用 Doughnut 近似）
  new Chart(gaugeChart.value, {
    type: 'doughnut',
    data: {
      labels: ['使用率', '剩余'],
      datasets: [{
        data: [56, 100-56],
        backgroundColor: [
          'rgba(54, 162, 235, 0.8)',
          'rgba(200, 200, 200, 0.2)'
        ],
        borderWidth: 0
      }]
    },
    options: {
      plugins: {
        title: { display: true, text: 'CPU 使用率（近似仪表盘）' },
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: ctx => ctx.label + ': ' + ctx.parsed + '%'
          }
        }
      },
      rotation: -90,
      circumference: 180,
      cutout: '70%',
      responsive: false
    }
  })
})
</script> 